<!--
 * @Description: 第八章 认识to系列全家桶 toRaw
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-11 16:40:43
-->
<template>
  <div>
    <p>to系列全家桶</p>
    <div>toRaw</div>
    <div>
      <p>obj: {{ obj }}</p>
      <p>obj 是否为Reactive响应式: {{ objIsRef }}</p>
      <p>toRaw 后的 obj : {{ toRawObj }}</p>
      <p>toRaw 后的 obj 是否为Reactive响应式: {{ toRawObjIsRef }}</p>

      <button @click="consoleShow">控制台输出</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef, toRefs, toRaw, isRef, isReactive } from 'vue'

const obj = reactive({
  name: 'IA',
  age: 100,
  like: 'jk',
})

const objIsRef = isReactive(obj)

const toRawObj = toRaw(obj)

const toRawObjIsRef = isReactive(toRawObj)

const consoleShow = () => {
  console.log('obj: ', obj)
  console.log('toRawObj: ', toRawObj)
}
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
